<script>
import KtMap from "/src/components/common/KtMap.vue";

export default {
  components: {KtMap},
  data(){
    return {
      title:"",
      data:{
        center:{
          // 默认新加坡
          longitude: 103.8198,
          latitude: 1.3521,
        },
        markers: [
          { latitude: 1.3521, longitude: 103.8198, title: "新加坡" },
        ]
      },
      show: false,
      loading: false
    }
  },
  mounted(){
  },
  methods: {
    // 初始化地图
    open(data){
      if (!data) {
        this.data.center = {
          // 默认新加坡
          longitude: 103.8198,
          latitude: 1.3521,
        };
        this.data.markers = [
        ];
        this.show = true;
        return;
      }
      // 将data的longitude和latitude转换为数字
      data.longitude = parseFloat(data.longitude);
      data.latitude = parseFloat(data.latitude);

      this.data.center = data;
      this.data.markers = [data];
      this.show = true;
    },
    // 关闭
    close() {
      this.show = false;
    },
    // 地图选择
    mapSelect(data) {
      let loading = this.$loading({
        lock: true,
        text: this.$i18n.zhToGlobal('选择中'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$emit("select",data[0]);
      this.loading = true;
      setTimeout(()=>{
        this.show = false;
        this.loading = false;
        loading.close();
      },500)
    }
  }
}
</script>

<template>
  <el-dialog
      v-loading="loading"
      draggable
      width="550px"
      :title="$i18n.zhToGlobal('选择经纬度')"
    v-model="show"
  @close="close"
  >
    <div style="text-align: center">
      <div
          v-if="show"
          class="map-box"
          style="display: inline-block;width: 500px;height: 400px;border-radius: 10px">
        <kt-map
            is-select
          @select="mapSelect"
            :data="data"
        ></kt-map>
      </div>
    </div>
  </el-dialog>

</template>

<style scoped lang="scss">
.map-box{
  // 超出不显示
  overflow: hidden;
}
</style>